<template>
	<view class="yz">
		<scroll-view scroll-x class="tag-nav nav text-center">
			<view class="cu-item" :class="0 == TabCur ? 'text-blue cur' : ''" @tap="tabSelect" data-id="0">上传列表</view>
			<view class="cu-item" :class="1 == TabCur ? 'text-blue cur' : ''" @tap="tabSelect" data-id="1">下载列表</view>
			<view class="cu-item" :class="2 == TabCur ? 'text-blue cur' : ''" @tap="tabSelect" data-id="2">离线下载</view>
		</scroll-view>
		<swiper class="contnet-swiper" :current="TabCur" @change="swiperChange">
			<!-- 上传部分********************************************************** -->
			<swiper-item class="contnet-swiper-item">
				<view class="no-reccord" v-if="File_Get_CompleteUploadTask.length == 0 && File_Get_UploadTask.length == 0">
					<image class="tip-img" src="../../../static/img/other/upload.png"></image>
					<text class="fo-28 fo-gray mt30">暂无上传记录</text>
				</view>
				<view class="reccord" v-else>
					<view class="padd20 mt20 flex wid1p justify-between bor-bom-2-e5e5e5">
						<view>正在上传({{ File_Get_UploadTask.length }})</view>
						<view>全部暂停</view>
					</view>
					<!-- 正在上传部分-->
					<view class="task padd20">
						<view class="task-list bor-bom-2-e5e5e5" v-for="i in File_Get_UploadTask">
							<view class="task-content">
								<image class="task-img" src="../../../static/img/file/loadingImg.gif"></image>
								<view class="task-content-txt">
									<view class="yy-txt-over1 font-wei600 fo-32">{{ i.fileName }}</view>
									<view class="yy-txt-over1 yymt10">{{ i.currentTotal }} / {{ i.total }}</view>
									<!-- <view class="yy-txt-over1 yymt10">{{totalSize(i.progress.totalSize)}} 2020-7-30  25416546546</view>
									<view>{{i.progress.curSize}}</view>
									<view>{{i.progress.totalSize}}</view> -->
								</view>
							</view>
							<view class="task-content-optera">
								<view class="circle-progress">
									<view class="left-jindutiao" :style="{ transform: `rotate(${L_deg}deg)`, backgroundColor: `${L_bg}` }"></view>
									<view class="right-jindutiao" :style="{ transform: `rotate(${R_deg}deg)`, backgroundColor: `${R_bg}` }"></view>
									<view class="circle-progress-icon"><text class="cuIcon-refresharrow"></text></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 已完成上传部分-->
					<view class="padd20 mt20 wid1p bor-bom-2-e5e5e5">已完成上传({{ File_Get_CompleteUploadTask.length }})</view>
					<view class="task padd20">
						<view class="task-list bor-bom-2-e5e5e5" v-for="i in File_Get_CompleteUploadTask">
							<view class="task-content">
								<loadImg class="task-img" mode='aspectFill' errorMode='scaleToFill' :src="i.outNetPath" imgHeight='80' imgWidth='80' ></loadImg>
								<view class="task-content-txt">
									<view class="yy-txt-over1 font-wei600 fo-32">{{ i.fileName }}</view>
									<view class="yy-txt-over1 yymt10">{{ $tool.comFileSize(i.fileSize) }} {{ $tool.create_time(new Date(i.SyncTime), 'YYYYMMMDDHHMMSS') }}</view>
								</view>
							</view>
							<text class="cuIcon-close" @click="onDelRecord(i.fileId)"></text>
						</view>
					</view>
				</view>
			</swiper-item>
			<!-- 下载部分********************************************************** -->
			<swiper-item class="contnet-swiper-item">
				<view class="no-reccord" v-if="File_Get_CompleteDownloadTask.length == 0 && File_Get_DownloadTaskt.length == 0">
					<image class="tip-img" src="../../../static/img/other/download.png"></image>
					<text class="fo-28 fo-gray mt30">暂无下载记录</text>
				</view>
				<!-- 正在下载部分-->
				<view class="reccord" v-else>
					<view class="padd20 mt20 flex wid1p justify-between bor-bom-2-e5e5e5">正在下载({{ File_Get_DownloadTaskt.length }})</view>
					<view class="task padd20">
						<view class="task-list bor-bom-2-e5e5e5" v-for="i in File_Get_DownloadTaskt">
							<view class="task-content">
								<image class="task-img" src="../../../static/img/home/NewNotes.png"></image>
								<view class="task-content-txt">
									<view class="yy-txt-over1">{{ i.fileName }}</view>
									<view class="yy-txt-over1 yymt10">{{ i.progress.curSize }}/{{ i.progress.totalSize }}</view>
									<!-- <view class="yy-txt-over1 yymt10">{{totalSize(i.progress.totalSize)}} 2020-7-30  25416546546</view>
									<view>{{i.progress.curSize}}</view>
									<view>{{i.progress.totalSize}}</view> -->
								</view>
							</view>
							<view class="task-content-optera">
								<view class="circle-progress">
									<view class="left-jindutiao" :style="{ transform: `rotate(${L_deg}deg)`, backgroundColor: `${L_bg}` }"></view>
									<view class="right-jindutiao" :style="{ transform: `rotate(${R_deg}deg)`, backgroundColor: `${R_bg}` }"></view>
									<view class="circle-progress-icon"><text class="cuIcon-refresharrow"></text></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 已完成下载部分-->
					<view class="padd20 mt20 flex wid1p justify-between bor-bom-2-e5e5e5">已完成下载({{ File_Get_CompleteDownloadTask.length }})</view>
					<view class="task">
						<view class="task-list bor-bom-2-e5e5e5" v-for="i in File_Get_CompleteDownloadTask">
							<view class="task-content">
								<image class="task-img" src="../../../static/img/home/NewNotes.png"></image>
								<view class="task-content-txt">
									<view class="yy-txt-over1">{{ i.fileName }}</view>
									<view class="yy-txt-over1 yymt10">{{ i.progress.totalSize }} {{ i.create_time }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="contnet-swiper-item">
				<view class="no-reccord">
					<image class="tip-img" src="../../../static/img/other/download.png"></image>
					<text class="fo-28 fo-gray mt30">暂无离线下载</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import { mapGetters } from 'vuex';
import loadImg from '../../../components/loadImg/index.vue';
import { API$DelUploadRecord, API$GetUploadRecordList } from '../../../common/API/file.js';
export default {
	props: {},
	components: { loadImg },
	name: '',
	watch: {
		R_deg() {
			if (this.R_deg == 180) {
				this.R_deg = 0;
				let T2 = setInterval(() => {
					this.L_deg++;
					if (this.L_deg == 180) {
						clearInterval(T2);
						// this.R_bg = 'blue'
					}
				}, 1000 / 60);
			}
		}
	},
	computed: {
		...mapGetters(['File_Get_DownloadTaskt', 'File_Get_CompleteDownloadTask', 'File_Get_UploadTask', 'File_Get_CompleteUploadTask'])
	},
	data() {
		return {
			TabCur: 0,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			L_deg: 0,
			L_bg: 'skyblue',
			R_deg: 0,
			R_bg: 'skyblue'
		};
	},
	onLoad() {
		// 改变swiper滑动
		uni.$on('changeSwitchBar', res => {
			this.TabCur = res.TarBar;
			this.scrollLeft = (res.TabCur - 1) * 60;
		});
		// 更新 上传记录
		uni.$on('FreshGetRecodList', () => this.GetRecodList());
	},
	onUnload() {
		uni.$off('changeSwitchBar')
		uni.$off('FreshGetRecodList')
	},
	async created() {
		this.GetRecodList();
	},
	mounted() {
		console.log(this.File_Get_DownloadTaskt);
		console.log(this.File_Get_CompleteDownloadTask);
		console.log(this.File_Get_UploadTask);

		// let T1 =  setInterval(()=>{
		// 	this.R_deg++
		// 	if(this.R_deg==180){
		// 		clearInterval(T1)
		// 		this.R_bg = 'blue'
		// 	}
		// },1000/60)
	},
	methods: {
		// swiper bar点击改变
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		},
		// swiper滑动改变
		swiperChange(e) {
			this.TabCur = e.detail.current;
		},
		// 删除上传成功记录
		onDelRecord(id) {
			this.$pub.AlertTwo('警告', '您是否要删除这段上传记录', '取消', '确定', async () => {
				await API$DelUploadRecord({ fileId: id });
				this.GetRecodList();
			});
		},
		/*****************************************************数据处理部分**********************************************************************************/
		async GetRecodList() {
			let res = await API$GetUploadRecordList();
			this.$store.commit('CHANGE_CompleteUploadTask', res.result.data);
		}
	}
};
</script>

<style lang="less" scoped>
.contnet-swiper {
	width: 100%;
	/* #ifdef H5 */
	height: calc(100vh - 44px - 100rpx);
	/* #endif*/
	/* #ifdef APP-PLUS */
	height: calc(100vh - 100rpx);
	/* #endif*/
}
.tag-nav {
	height: 100rpx;
	overflow: hidden;
	box-sizing: border-box;
	color: gray;
	.cu-item {
		width: 200rpx;
		flex: 1;
	}
}
.contnet-swiper-item {
	/* #ifdef H5 */
	height: calc(100vh - 44px - 100rpx);
	/* #endif*/
	/* #ifdef APP-PLUS */
	height: calc(50vh - 100rpx);
	/* #endif*/
	background-color: #fff;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	position: relative;
	overflow: scroll;
	.no-reccord {
		position: absolute;
		top: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.tip-img {
			height: 160rpx;
			width: 160rpx;
		}
	}
	.reccord {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		// padding: 20rpx;
		color: gray;
		overflow: scroll;
		.task {
			display: flex;
			flex-direction: column;
			width: 100%;
			.task-list {
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				padding: 20rpx;
				/* #ifdef APP-PLUS */
				padding: 60rpx 20rpx;
				/* #endif */
				.task-img {
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.task-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.task-content-txt {
						width: 400rpx;
					}
				}
			}
		}
	}

	.contnet-swiper-item {
	}
}
// 圆形进度条
.circle-progress {
	height: 72rpx;
	width: 72rpx;
	background-color: blue;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	.circle-progress-icon {
		height: 52rpx;
		width: 52rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 11;
	}
	.left-jindutiao {
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		height: 72rpx;
		width: 36rpx;
		background-color: skyblue;
		transform-origin: 36rpx 36rpx;
		transform: rotate(0deg);
	}
	.right-jindutiao {
		position: absolute;
		z-index: 10;
		top: 0;
		left: 36rpx;
		height: 72rpx;
		width: 36rpx;
		// border-radius: 50%;
		transform-origin: 0 36rpx;
		background-color: skyblue;
		transform: rotate(180deg);
	}
}
</style>
